<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="checkbox" id="all" />全选/全不选
    <ul>
        <li>
            <input type="checkbox" id="item" />1
        </li>
        <li>
            <input type="checkbox" id="item" />2
        </li>
        <li>
            <input type="checkbox" id="item" />3
        </li>
    </ul>
    <script>
        /*
            不同于视频中kerwin老师的思路，我选择了将伪数组转化为真实数组，然后使用forEach将所有的item项添加了一个点击事件，事件中使用了every方法，如果所有的小复选框都已被勾选，则全选的按钮也会自动选中，否则全选的按钮就会置空。而全选的复选框也会添加一个点击事件，这个比较简单，事件中直接做个循环赋值就好。
        */
        let all = document.querySelector('#all')
        let items = Array.from(document.querySelectorAll('#item'))
        let count = 0
        all.onclick = () => {
            items.forEach(item => {
                item.checked = all.checked
            })
        }
        items.forEach(item=>{
            item.onclick = ()=>{
                if(items.every(item=>item.checked)){
                    all.checked = true
                }
                else{
                    all.checked = false
                }
            }
        })
    </script>
</body>

</html>